<template>
  <div style="width: 100%">
    <!-- 头部信息 -->
    <slot name="header" :chek-ids="innerCheckedKeys" />

    <!-- 搜索框 -->
    <template v-if="showSearch">
      <a-input-search v-model:value="searchValue" style="margin-bottom: 8px" placeholder="输入搜选项" @search="onSearch" />
    </template>

    <!-- tree组件 -->
    <a-tree
      v-bind="$attrs"
      v-model:selectedKeys="selectedKeys"
      :checked-keys="checkedKeys"
      :tree-data="treeData"
      :field-names="fieldNames"
      :checkable="checkable"
      style="width: 100%"
      :show-line="showLine"
      @check="onCheck"
      @select="onSelect"
    >
      <template #title="{ id, name, children }">
        {{ name }}
        <template v-if="slots.actionArea">
          <div style="float: right">
            <!-- 自定义每行右侧区域 -->
            <slot :id="id" name="actionArea" :children="children" />
          </div>
        </template>
      </template>

      <!-- 自定义图标 -->
      <template #icon="{ key, selected }">
        <slot :key="key" name="iconArea" :selected="selected" />
      </template>
    </a-tree>

    <!-- 底部信息 -->
    <slot name="foooter" :chek-ids="innerCheckedKeys" />
  </div>
</template>
<script setup lang="ts">
import type { TreeProps } from "ant-design-vue"
const searchValue = ref<string>()
const selectedKeys = ref<string[]>()
const innerCheckedKeys = ref<string[]>() //获取最新选中的数据
interface ItreeNode {
  children: string
  title: string
  key: string
  [propsName: string]: any
}

interface Props {
  treeData?: TreeProps["treeData"]
  checkedKeys?: string[] // （受控）选中复选框的树节点
  checkable?: boolean // 	当树为 checkable 时，设置独立节点是否展示 Checkbox
  fieldNames?: ItreeNode
  [propsName: string]: any
  showLine?: boolean
  showSearch?: boolean //是否有查询文本框
}

const slots = useSlots()
const props = withDefaults(defineProps<Props>(), {
  treeData: () => [],
  checkedKeys: () => [],
  checkable: true,
  showSearch: true,
  fieldNames: () => ({
    children: "children",
    title: "name",
    key: "id",
  }),
  showLine: false,
})

const emits = defineEmits<{
  (e: "on-check", checkedKeys: string[], item: object): void
  (e: "on-select", checkedKeys: string[], item: object): void
  (e: "on-click-item", id: string): void
}>()

//点击复选框触发
const onCheck = (checkedKeys: any, item: object): void => {
  innerCheckedKeys.value = checkedKeys
  emits("on-check", checkedKeys, item)
}

//点击树节点触发
const onSelect = (checkedKeys: string[], item: object): void => {
  emits("on-select", checkedKeys, item)
}

//点击行右面的省略...
const onClickItem = (id: string): void => {
  emits("on-click-item", id)
}

// 文本框查询
const onSearch = (): void => {
  console.log(11)
}
</script>

<style scoped lang="less">
.elli-view {
  &:hover {
    color: #409eff;
  }
}
</style>

<!-- 

  1. 补充查询功能
  2. 新增插槽 header | footer
 -->
